<template>
    <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="(item,id) in newsList" :key="item.t">
                <router-link :to="'/home/newsInfo/'+item.t">
                    <img class="mui-media-object mui-pull-left" :src="item.profile_image">
                    <div class="mui-media-body">
                        <h1>{{item.name}}</h1>
                        <p class="content">{{item.text}}</p>
                        <p class='mui-ellipsis'>
                            <!--<span>发表时间：{{new Date()|dateFormat}}</span>-->
                            <span>发表时间：{{new Date()|dateFormat('YYYY-MM-DD')}}</span><!--给格式化字符串传参-->
                            <span style="float:right">喜欢人数：{{item.favourite}}</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    import {Toast}from 'mint-ui'
    export default {
       data(){
           return{
               newsList:[],//新闻列表
           }
       },
        created(){
           //调用getNewsList方法
            this.getNewsList();
        },
        methods:{
           getNewsList(){//获取新闻列表
               this.$http.get('satinApi?type=1&page=1').then(result=>{
                   if(result.body.code==200){
                       //如果没有失败，应该把数据保存在data上
                       this.newsList=result.body.data;
                   }else{
                       Toast('列表获取失败！');
                   }
               })
           }
        }
    }
</script>

<style scoped lang="scss">
  .mui-media-body{
     h1{
       font-size:14px;
     }
      .content{
          color:#666;
      }
      .mui-ellipsis{
          color: rgb(38,162,255);
          /*display: flex;*/
          /*justify-content: space-between;*/
          font-size: 12px;
          span{
              width:30%;
              float: left;
          }
      }
  }
</style>